<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定时器</title>
</head>

<body>
    <!-- 语法是：setTimeout(调用函数，[延迟的毫秒数]) -->
    <div style="width: 50px;height:50px;background-color: aqua;">

    </div>
    <script>
        var div = document.querySelector('div');

        function coutdown() {
            div.style.display = 'none';
        }
        var timer = setTimeout(coutdown, 3000); //这个函数是，这么多毫秒后执行，执行一次
        //通常会给这个定时器添加一个名字方便操作
        //清除定时器 clearTimeout(被停止的定时器)
        div.onclick = function() {
                clearTimeout(timer);
            }
            //另一个函数是可以每隔一段时间就执行一次setInterval(函数名，时间间隔毫秒数);
            //清除他的方法是clearInterval（）;
    </script>
</body>

</html>